<template>
  <div>
    <router-link to="/home">
      <van-nav-bar title="订单结算" left-arrow />
    </router-link>
    <main>
      <div class="content">
        <div class="item" v-for="item in rows.itemList" :key="item.id">{{ item.dish.name }} {{ item.taste ? item.taste.name : '' }} x{{ item.quantity }}</div>
      </div>
      <van-divider />
      <p>
        共{{ rows.totalQuantity }}件，合计<b>￥{{ rows.totalPrice }}</b>
      </p>
    </main>
    <van-form>
      <van-field name="stepper" label="人数">
        <template #input>
          <van-stepper v-model="rows.peopleQuantity" />
        </template>
      </van-field>
      <van-field readonly clickable :value="className" label="餐桌" placeholder="点击选择餐桌" :rules="[{ required: true, message: '' }]" @click="showPicker = true" />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker @confirm="onConfirm" show-toolbar :columns="columns" @cancel="showPicker = false" />
      </van-popup>
      <van-field v-model="rows.remark" label="备注" placeholder="请输入备注" />
      <van-button type="primary" style="border-radius: 8px; margin-top: 20px" block native-type="submit" @click="pay">确定</van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  mounted() {
    let cartType = 0;
    if (!Array.isArray(JSON.parse(this.$route.query.list))) {
      cartType = 1;
    }
    console.log('路由参数', JSON.parse(this.$route.query.list)); // JSON.parse(this.$route.query.list)ze==0?cartType=0:cartType=1
    this.req
      .post('/order/confirm', {
        itemList: JSON.parse(this.$route.query.list),
        cartType,
      })
      .then((res) => {
        Object.assign(this.rows, res.data);
      });
    this.req.get('/diningTable', { params: { pageSize: 999 } }).then((res) => {
      this.columns = res.rows
        // .filter((v) => v.usedQuantity == 0)
        .map((v) => {
          return {
            text: v.name,
            value: v.id,
          };
        });
      // this.classId = res.rows[0].id;
      // this.className = res.rows[0].name;\
      this.rows.tableId = sessionStorage.getItem('tableId');
      this.classId = sessionStorage.getItem('tableId');
      this.className = res.rows.find((v) => v.id == sessionStorage.getItem('tableId')).name;
    });
  },
  data() {
    return {
      rows: {
        itemList: [],
        totalPrice: 0,
        totalQuantity: 0,
        peopleQuantity: 0,
        remark: '',
        tableId: 0,
        password: '20020123feng',
      },
      value: '',
      password: '',
      show: false,
      showPicker: false,
      columns: [],
      classId: 0,
      className: '',
    };
  },
  methods: {
    onConfirm(val) {
      this.rows.tableId = val.value;
      this.classId = val.value;
      this.className = val.text;
      this.showPicker = false;
    },
    pay() {
      if (!this.rows.tableId) {
        return;
      }
      this.req.post('/order/create', this.rows).then((res) => {
        if (res.status == 400) {
          console.log(1);
          return this.$notify({
            type: 'danger',
            message: res.msg,
          });
        }
        this.$router.push({
          path: '/paymethod',
          query: {
            orderNo: res.data.orderNo,
            type: 'buy',
          },
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
main {
  background-color: #fff;
  margin: 1.25rem;
  border-radius: 1.25rem;
  padding: 1.25rem;
  .content {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-right: 3.125rem;
      font-size: 0.75rem;
      color: rgb(116, 116, 116);
      margin-bottom: 0.3125rem;
    }
  }
}
p {
  text-align: right;
}
</style>
